<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>爱IT</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/common.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/index.css}"/>
</head>
<body>
<!-- 公共头部 -->
<div th:replace="FrontPages/common/head :: head(n=1)" name="headFrame"></div>


<div class="index-container">
    <!-- 左侧目录导航栏 -->
    <div class="left-Navigation">
        <ul class="left-menu">
            <li class=""><a class="active" href="javascropt:;">推荐</a></li>
            <li class=""><a href="javascropt:;">动态</a></li>
            <li class=""><a href="javascropt:;">程序人生</a></li>
            <li class=""><a href="javascropt:;">Python</a></li>
            <li class=""><a href="javascropt:;">Java</a></li>
            <li class=""><a href="javascropt:;">前端</a></li>
            <li class=""><a href="javascropt:;">架构</a></li>
            <li class=""><a href="javascropt:;">区块链</a></li>
            <li class=""><a href="javascropt:;">数据库</a></li>
            <li class=""><a href="javascropt:;">5G</a></li>
            <li class=""><a href="javascropt:;">游戏开发</a></li>
            <li class=""><a href="javascropt:;">移动开发</a></li>
            <li class=""><a href="javascropt:;">运维</a></li>
            <li class=""><a href="javascropt:;">人工智能</a></li>
            <li class=""><a href="javascropt:;">安全</a></li>
            <li class=""><a href="javascropt:;">云计算/大数据</a></li>
            <li class=""><a href="javascropt:;">物联网</a></li>
            <li class=""><a href="javascropt:;">其他</a></li>
        </ul>
        <!-- <li class="ss"><a href="javascropt:;">Java</a></li> -->
    </div>
    <!-- 中间内容 -->
    <div class="main-menu">
        <!-- 轮播图 -->
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div>
                    <a href="https://www.bilibili.com/video/av91200016/">
                        <img th:src="@{/layui/images/advertisement/adv1.jpg}"/>
                    </a>
                </div>
                <div>
                    <a href="https://www.bilibili.com/video/av91730047">
                        <img th:src="@{/layui/images/advertisement/adv2.jpg}"/>
                    </a>
                </div>
                <div>
                    <a href="https://blog.csdn.net/dQCFKyQDXYm3F8rB0/article/details/104624177">
                        <img th:src="@{/layui/images/advertisement/adv3.jpg}"/>
                    </a>
                </div>
                <div>
                    <a href="https://blog.csdn.net/FL63Zv9Zou86950w/article/details/104624035">
                        <img th:src="@{/layui/images/advertisement/adv4.jpg}"/>
                    </a>
                </div>
                <div>
                    <a href="https://www.bilibili.com/video/av91656267">
                        <img th:src="@{/layui/images/advertisement/adv5.jpg}"/>
                    </a>
                </div>
            </div>
        </div>
        <!-- 博客与日记列表 -->
        <div class="main-list">
            <ul class="main-list-ul">
                <li th:each="blog,blogStat:${blogs}" th:if="${blogStat.count} le 10">
                    <div class="main-list-item">
                        <div class="title" th:value="${blog.bid}" onclick="click0(this);">
                            <h2 th:text="${blog.title}"></h2>
                        </div>
                        <div class="content" th:utext="${blog.content}">
                        </div>
                        <div class="user-bar">
                            <img th:src="${bloguser.get(blogStat.index).img}?:@{/layui/images/head-pic/head1.jpg}"/>
                            <a th:text="${bloguser.get(blogStat.index).name?:bloguser.get(blogStat.index).uid}"
                               th:href="@{'/User/userexh/'+${bloguser.get(blogStat.index).uid} }">作者</a>
                        </div>
                        <div class="status">
                            <i class="layui-icon">&#xe6c6;&nbsp;</i>
                            <span th:text="${blog.likeNumber}"></span>&nbsp;|
                            <i class="layui-icon">&#xe600;&nbsp;</i>
                            <span th:text="${blog.collectionNumber}">546 &nbsp;|</span>
                            <!--<i class="layui-icon">&#xe63a;&nbsp;</i>-->
                            <!--<span>7</span>-->
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-menu">
        <!-- 今日推荐 -->
        <div class="day-recommend">
            <h3 class="right-menu-title">
                <i class="layui-icon">&#xe623;</i>
                <span>今日推荐</span>
            </h3>
            <div>
                <ul class="right-menu-ul">
                    <li>
                        <div class="right-menu-item">
                            <a href="https://t.csdnimg.cn/jfJx" target="_blank">
                                <img th:src="@{/layui/images/news/new1.jpg}"/>
                            </a>
                            <div class="right-menu-content">
                                <h3>
                                    <a href="https://t.csdnimg.cn/jfJx" target="_blank">福利直投！CSDN技术公开课评选进行中</a>
                                </h3>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="right-menu-item">
                            <a href="https://t.csdnimg.cn/jfJx" target="_blank">
                                <img th:src="@{/layui/images/news/new2.jpg}"/>
                            </a>
                            <div class="right-menu-content">
                                <h3>
                                    <a href="https://edu.csdn.net/huiyiCourse/detail/1169" target="_blank">周四晚8点直播
                                        | 解读云边端联动下的全栈AI技术应用</a>
                                </h3>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="right-menu-item">
                            <a href="https://t.csdnimg.cn/jfJx" target="_blank">
                                <img th:src="@{/layui/images/news/new1.jpg}"/>
                            </a>
                            <div class="right-menu-content">
                                <h3>
                                    <a href="https://t.csdnimg.cn/jfJx" target="_blank">福利直投！CSDN技术公开课评选进行中</a>
                                </h3>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="right-menu-item">
                            <a href="https://t.csdnimg.cn/jfJx" target="_blank">
                                <img th:src="@{/layui/images/news/new2.jpg}"/>
                            </a>
                            <div class="right-menu-content">
                                <h3>
                                    <a href="https://edu.csdn.net/huiyiCourse/detail/1169" target="_blank">周四晚8点直播
                                        | 解读云边端联动下的全栈AI技术应用</a>
                                </h3>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 右侧博主推荐 -->
        <div class="blogger-recommend">
            <h3 class="blogger-recommend-title">
                <i class="layui-icon">&#xe623;</i>
                <span>博主推荐</span>
            </h3>
            <div>
                <ul class="blogger-recommend-ul" th:each="user,userStat:${users}" th:if="${userStat.count} le 5">
                    <li>
                        <div class="blogger-recommend-item">
                            <img th:src="${user.getImg()!=null? user.getImg():'/layui/images/head-pic/head3.jpg'}"/>
                            <div class="blogger-recommend-content">
                                <div class="blogger-name">
                                    <a class="user-name" th:text="${user.name}"
                                       th:href="@{'/User/userexh/'+${user.uid}}" >轻风熟羊</a>
                                </div>
                                <div class="blogger-status">
                                    <span class="name">博客:</span>
                                    <span class="number" th:text="${user.blogNumber!=null?user.blogNumber:'0'}">66 &nbsp;</span>
                                    <span class="name">粉丝:</span>
                                    <span class="number" th:text="${user.follows}">546 &nbsp;</span>
                                    <!--<span class="name">获赞:</span>-->
                                    <!--<span class="number">123</span>-->
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>


<!-- 右侧辅助导航条 -->
<div class="right-Navigation">
    <a href="javascropt:;">
        <i class="layui-icon layui-icon-reply-fill right-icon"></i>
        <span class="right-text">意见反馈</span></a>
    <a href="javascropt:;">
        <i class="layui-icon layui-icon-help right-icon"></i>
        <span class="right-text">帮助中心</span></a>
    <a class="weixin-icon" href="javascropt:;">
        <div class="weixin-img">
            <p>扫描二维码<br>添加我的微信</p>
            <img th:src="@{/layui/images/weixin.jpg}"/>
        </div>
        <i class="layui-icon layui-icon-login-wechat right-icon"></i>
        <span class="right-text">我的微信</span>
    </a>
    <a href="javascropt:;">
        <i class="layui-icon layui-icon-up right-icon"></i>
        <span class="right-text totop">返回顶部</span></a>
</div>

<!-- 公共尾部 -->
<!--<div id="root_button">-->
<!--<iframe th:insert="/FrontPages/common/bottom.html" width="100%" ; height="380px" frameborder="0" scrolling="no"-->
<!--name="bottomFrame" style="position: relative;z-index:6;"></iframe>-->
<!--</div>-->
<div th:replace="FrontPages/common/bottom::bottom" name="bottomFrame"></div>

<script type="text/jscript" th:src="@{/layui/layui.js}"></script>
<script type="text/jscript" th:src="@{/layui/lay/js/index.js}" src="static/layui/lay/js/index.js"></script>

<!-- 背景特效 -->
<script th:src="@{/layui/lineEffects.js}"></script>
</body>
</html>
